<template>
    <div>
        <SupInput
        :InpList='InpList'
        :BtnList='BtnList'
        @clickFn='addFindFn'
        ></SupInput>
        <Suptable
        :headerData='headerData'
        :tableData='tableData'
        :pagesizeList='pagesizeList'
        @handleSizeChange="SizeChangeFn"
        @handleCurrentChange='CurrentChangeFn'
        :total='total'
        :pagesize='pagesize'
        :operaWidth='300'
        >
            <template v-slot:opera='{ row }'>
                <el-button type="primary" @click="editClick(row.row)" size="small">编辑</el-button>
                <el-button type="danger" @click="delClick(row.row.id)" size="small">删除</el-button>
                <el-button type="primary" @click="authClick(row.row)" size="small">授权</el-button>
            </template>
        </Suptable>
         <div>
            <el-dialog :title="isEdit?'修改角色信息':isAuth?'授权':'新增'" :visible.sync="dialogFormVisible">
                <div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="角色名称" prop="name" v-if="!isAuth">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="说明" prop="desc" v-if="!isAuth">
                            <el-input v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="角色权限" prop="roles" v-if='!isEdit || isAuth'>
                                <el-cascader
                                @change="checkFn"
                                :options="rolesArr"
                                :props="props"
                                collapse-tags
                                clearable>
                                </el-cascader>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import {rolesList,roleIdList,addRoles,detRoles,queryRoles,editRoles,authRoles} from '@/api/rolesMock';
import SupInput from '@/components/SupInput';
import Suptable from '@/components/Suptable';
import {SetArr} from '@/config/config'
export default {
    name:'roleManagement',
    data(){
        return{
            InpList:[
                {
                    model:'',
                    text:'请输入角色名称'
                }
            ],
            BtnList:[
                {
                    icon:'el-icon-search',
                    name:'查找'
                },
                {
                    icon:'el-icon-edit',
                    name:'添加'
                }
            ],
            headerData:[
                {
                    prop:"name",
                    label:"角色名称",
                },
                {
                    prop:"desc",
                    label:"说明",
                },
            ],
            rolesArr:[],
            props: { multiple: true },
            tableData:[],
            pagesizeList:[5,10],
            total:0,
            pagenum:1,
            pagesize:5,
            dialogFormVisible:false,
            isAuth:false,
            isEdit:false,
            editId:'',
            ruleForm: {
                name: '',
                desc:'',
                roles:'',
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在2个字以上', trigger: 'blur' }
                ]
            },
        }
    },
    components:{SupInput,Suptable},
    mounted(){
        let _self = this;
        _self.obtainList()
        _self.obtainRoles()
    },
    methods:{
        //获取角色列表
        obtainList(){
            let _self = this;
            let data = {
                pagenum:_self.pagenum,
                pagesize:_self.pagesize
            };
            rolesList(data).then(res=>{
                // console.log(res);
                if(res.meta.status){
                    _self.total = res.data.total;
                    _self.tableData = res.data.user
                }
            })
        },
        // 权限列表
        obtainRoles(){
            let _self = this;
            roleIdList().then(res=>{
                // console.log(res);
                if(res.meta.status == 200){
                    _self.rolesArr = res.data.RolesList
                }
            })
        },
        //下拉选择器
        checkFn(val){
            let _self = this;
            // console.log(val);
            // console.log(SetArr(val,0));
            _self.ruleForm.roles = SetArr(val,0)
        },
        // 添加和查询按钮
        addFindFn(index){
            let _self = this;
            _self.$nextTick(()=>{
                _self.$refs['ruleForm'].clearValidate()
            })
            if(index==0){
                let data = {
                    name:_self.InpList[0].model
                }
                queryRoles(data).then(res=>{
                    // console.log(res);
                    if(res.meta.status ==200){
                        _self.tableData = res.data.arr
                    }else{
                        _self.obtainList()
                    }
                })
            }else if(index==1){
                _self.dialogFormVisible = true;
                _self.isEdit = false;
                _self.isAuth = false;
                _self.ruleForm={
                    name: '',
                    desc:'',
                    roles:'',
                };
            }
        },
        
        submitForm(formName) {
            let _self = this;
            _self.$refs[formName].validate((valid) => {
            if (valid) {
                if(_self.isEdit){
                    let data = _self.ruleForm;
                    data.id = _self.editId;
                    editRoles(data).then(res=>{
                        if(res.meta.status ==200){
                           _self.dialogFormVisible = false; 
                           _self.obtainList()
                        }
                    })
                }else{
                    if(!_self.isEdit && !_self.isAuth){
                        let data = _self.ruleForm;
                        addRoles(data).then(res=>{
                            // console.log(res);
                            if(res.meta.status ==200){
                                _self.dialogFormVisible = false; 
                                _self.obtainList()
                            }
                        })
                    }else if(_self.isAuth){
                        let data = {
                           id:_self.editId,
                           roles:_self.ruleForm.roles
                        }
                        authRoles(data).then(res=>{
                            if(res.meta.status ==200){
                                _self.dialogFormVisible = false; 
                                _self.obtainList()
                            }
                        })
                    }
                   
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //取消按钮
        resetForm(formName){
            let _self = this;
            _self.dialogFormVisible = false;
        },
        //编辑按钮
        editClick(row){
            let _self = this;
            _self.isEdit = true;
            _self.isAuth = false;
            _self.dialogFormVisible = true;
            let {name,desc} = row;
            _self.ruleForm = {name,desc};
            _self.editId = row.id;
            _self.$nextTick(()=>{
                _self.$refs['ruleForm'].clearValidate()
            })
        },
        //删除按钮
        delClick(id){
            let _self = this;
            let data = {id};
            detRoles(data).then(res=>{
                if(res.meta.status ==200){
                   _self.obtainList()
                }
            })
        },
        //授权按钮
        authClick(row){
            let _self = this;
            _self.isAuth = true;
            _self.isEdit = false;
            _self.dialogFormVisible = true;
            _self.editId = row.id;
            // console.log(row);
            // let txt = '';
            // for(let item1 of row.roles){
            //     for(let item2 of _self.rolesArr){
            //         if(item1==item2.value){
            //             txt = txt + '/' + item2.label
            //         }else{
            //             for(let item3 of item2.children){
            //                 if(item1 == item3.value){
            //                     txt = txt + '/' + item3.label
            //                 }
            //             }
            //         }
            //     }
            // }
            // _self.ruleForm.roles = txt;
        },
        SizeChangeFn(val){
            let _self = this;
            _self.pagesize = val;
            _self.obtainList()
        },
        CurrentChangeFn(val){
            let _self = this;
            _self.pagenum = val;
            _self.obtainList()
        }
    },
}
</script>